const loadingText =document.querySelector('.loading-text')
const bg = document.querySelector('.bg')
// 加载数字的样式
let load = 0   

let int = setInterval(bluring, 10);

function bluring() {
  load++
  if(load>99) {
    clearInterval(int)
  }
  loadingText.innerHTML = `${load}%`
  // 字体透明度
  loadingText.style.opacity = scale(load,0,100,1,0)
  // 背景模糊度
  bg.style.filter = `blur(${scale(load,0,100,30,0)}px)`

}
// 一个数字load在一个范围内在进行取值
// num:数值 n_min：最小数值 in_max：最大数值就是load的数值  就是在0-100之间取数   后面两个就是控制透明度 从1到0 就是从模糊到透明 
const scale = (num,in_min,in_max,out_min,out_max) => {
  return ((num - in_min) * (out_max - out_min)) / (in_max - in_min) + out_min
}
